<!--
  Generated template for the CeshiPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->


<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>heros</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

<h1>{{title}}</h1><h2>{{hero}} details!</h2>

<hr />

<h1>{{title}}</h1><h2>{{hero1.name}} details!</h2>

<hr />

<div>
  <label>name: </label>
  <input [(ngModel)]="hero1.name" placeholder="name">
</div>

<hr />

 
 <ul class="heroes">
<li *ngFor="let hero of heroes" (click)="onSelected(hero)" [class.selected]="hero === selectedHero">
  <span class="badge">{{hero.id}}</span><span>{{hero.name}}</span>
  <button class="delete"
  (click)="delete(hero); $event.stopPropagation()">x</button>
</li>
 </ul>

<div *ngIf="selectedHero">
 <h2 >{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>

<div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

</div>


<!--test introduce from detail component 和上面一样的显示选中的名字,但是是在一个子组件里-->
<page-hero-detail [hero]="selectedHero">
  loading....
</page-hero-detail>

<!--


在这里用到了  page-hero-detial
-->
<!--保存更新数据-->

<button (click)="save()">Save data</button>
<button (click)="getHeroes()">获取service数据</button>

<!--新增英雄-->
<p>新增英雄</p>
<div>
  <label>Hero name:</label> <input #heroName />
  <button (click)="add(heroName.value); heroName.value=''">
    Add
  </button>
</div>



<!--service      load-->
<div>
  <p *ngFor="let item of testSevice">
    {{item.name}}  {{item.id}}
    
    </p>
</div>


</ion-content>
